/**
 * 统一的Toast提示组件
 * 用于展示各类消息提示，支持多种状态和自定义样式
 */

const mobx = require('../../../framework/mobx/mobx_wx.js');
const { uiStore } = require('../../../store/global/ui.js');

Component({
  /**
   * 使用MobX绑定行为
   */
  behaviors: [mobx.storeBindingsBehavior],
  
  /**
   * 配置MobX绑定
   */
  storeBindings: {
    store: uiStore,
    fields: {
      toast: 'toast'
    },
    actions: {
      hideToast: 'hideToast'
    }
  },
  
  /**
   * 组件选项
   */
  options: {
    addGlobalClass: true,
    styleIsolation: 'shared'
  },
  
  /**
   * 组件属性
   */
  properties: {
    // 是否使用自定义样式
    custom: {
      type: Boolean,
      value: false
    },
    
    // 自定义提示类型
    type: {
      type: String,
      value: '' // 空值则使用Store中的type
    },
    
    // 自定义提示内容
    message: {
      type: String,
      value: '' // 空值则使用Store中的message
    },
    
    // 自定义显示状态
    show: {
      type: Boolean,
      value: null // null值则使用Store中的show
    },
    
    // 自定义显示位置
    position: {
      type: String,
      value: 'center' // top, center, bottom
    },
    
    // 自定义图标
    icon: {
      type: String,
      value: ''
    },
    
    // 自动关闭延时
    duration: {
      type: Number,
      value: 0 // 0表示使用Store中的duration
    },
    
    // 是否显示遮罩
    mask: {
      type: Boolean,
      value: false
    },
    
    // z-index
    zIndex: {
      type: Number,
      value: 1000
    }
  },
  
  /**
   * 组件内部数据
   */
  data: {
    // 当前显示状态
    visible: false,
    
    // 实际显示的内容
    currentMessage: '',
    
    // 实际显示的类型
    currentType: 'info',
    
    // 动画类名
    animationClass: '',
    
    // 定时器ID
    timerId: null
  },
  
  /**
   * 数据监听器
   */
  observers: {
    // 监听Toast状态变化
    'toast, show, message, type': function(toast, show, message, type) {
      if (this.properties.custom) {
        // 自定义模式，使用属性控制
        if (show !== null) {
          this._updateToast(show, message || '', type || 'info');
        }
      } else {
        // Store模式，使用Store状态控制
        this._updateToast(
          toast.show,
          toast.message,
          toast.type
        );
      }
    }
  },
  
  /**
   * 组件生命周期
   */
  lifetimes: {
    /**
     * 组件实例进入页面节点树时执行
     */
    attached: function() {
      // 初始化状态
      if (this.properties.custom && this.properties.show !== null) {
        this._updateToast(
          this.properties.show,
          this.properties.message || '',
          this.properties.type || 'info'
        );
      } else {
        this._updateToast(
          this.data.toast.show,
          this.data.toast.message,
          this.data.toast.type
        );
      }
    },
    
    /**
     * 组件实例被从页面节点树移除时执行
     */
    detached: function() {
      // 清除定时器
      if (this.data.timerId) {
        clearTimeout(this.data.timerId);
      }
    }
  },
  
  /**
   * 组件方法
   */
  methods: {
    /**
     * 更新Toast状态
     * @private
     */
    _updateToast: function(show, message, type) {
      if (show) {
        // 显示Toast
        this.setData({
          visible: true,
          currentMessage: message,
          currentType: type,
          animationClass: 'toast-enter'
        });
        
        // 设置自动关闭定时器
        const duration = this.properties.duration || this.data.toast.duration || 2000;
        if (this.data.timerId) {
          clearTimeout(this.data.timerId);
        }
        
        const timerId = setTimeout(() => {
          this._hideToast();
        }, duration);
        
        this.setData({ timerId });
      } else if (this.data.visible) {
        // 隐藏Toast
        this._hideToast();
      }
    },
    
    /**
     * 隐藏Toast
     * @private
     */
    _hideToast: function() {
      // 先播放退出动画
      this.setData({ animationClass: 'toast-exit' });
      
      // 等待动画完成后隐藏
      setTimeout(() => {
        this.setData({ visible: false });
        
        // 如果不是自定义模式，调用Store的隐藏方法
        if (!this.properties.custom) {
          this.hideToast();
        }
      }, 200);
    },
    
    /**
     * 手动关闭Toast
     */
    close: function() {
      this._hideToast();
    },
    
    /**
     * 阻止事件冒泡
     */
    preventTouchMove: function() {
      return false;
    }
  }
}); 